<template>

  <el-row type="flex" class="row-bg" justify="center">
    <el-col :xl="6" :lg="7">
      <div class="login-form">
        <h2>欢迎注册游戏商城</h2>
        <el-image
            style="width: 180px; height: 180px"
            :src="require('@/assets/img_29.png')"
        ></el-image>
        <p>

        </p>
      </div>
    </el-col>

    <el-col :span="1">
      <el-divider direction="vertical"></el-divider>
    </el-col>

    <el-col :xl="6" :lg="7">
      <el-form label-position="right" :rules="rules" label-width="80px" :model="loginForm" ref="loginForm">

        <el-form-item label="用户名" prop="username" style="width: 380px;">
          <el-input v-model="loginForm.username" @input="change($event)"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" style="width: 380px;">
          <el-input type="password" v-model="loginForm.password" @input="change($event)"></el-input>
        </el-form-item>
        <el-form-item  label="邮箱" prop="email" style="width: 380px;">
          <el-input type="email" v-model="loginForm.email" @input="change($event)"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')">注册</el-button>
          <el-button @click="getPass()">已有账号？登录</el-button>
          <el-button @click="goBack">返回首页</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

</template>

<script>
import qs from 'qs'
export default {
  name: "register",
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        email:'',
        role:''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          { min: 6, message: '密码不能少于6位', trigger: 'blur' }
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],

      },
    }
  },

  methods: {
    goBack() {
      this.$router.push('/home');
    },
    //强制刷新解决input无法输入问题
    change(){
      this.$forceUpdate();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let psd = this.$md5(this.loginForm.password);
          this.loginForm.password=psd;
          this.loginForm.role=0;
          this.$axios.post('/user/signup',this.loginForm).then(res => {
            //返回的信息
            this.loginForm={};
            if(res.status === 200) {
              this.$message({
                showClose: true,
                message: '注册成功',
                type: 'success',
              });
              this.loginForm={};
            }
            else {
              alert ('error submit!!');
              return false;
            }
          })
        }
        else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getPass() {
      this.$router.push("/Login");
    },
    //判断身份
    getIdentity() {
      this.$axios.get("/sys/userInfo").then(res => {
        this.userRole = res.data.data.userRole;
        this.password = res.data.data.password;
        this.statu = res.data.data.statu;
        console.log(res.data.data);
        if(this.statu === "毕业/离职"){
          this.$message({
            showClose: true,
            message: '已毕业/离职，无法登录',
            type: 'warning',
          })
        }else if(this.userRole === "学生"){
          if(this.loginForm.password === "123456"){
            this.$router.push("/student/ChangePassword");
            this.$message({
              showClose: true,
              message: '请修改初始密码',
              type: 'warning',
            })
          }else{
            this.$router.push("/student")
          }
        }else if(this.userRole === "教师"){
          if(this.loginForm.password === "123456"){
            this.$router.push("/teacher/ChangePassword")
            this.$message({
              showClose: true,
              message: '请修改初始密码',
              type: 'warning',
            })
          }else{
            this.$router.push("/teacher")
          }
        }else{
          this.$router.push("/admin")
        }
      })
    },
  },
}
</script>

<style scoped>
.el-col {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}
.el-row {
  height: 100%;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/*分割线*/
.el-divider {
  height: 200px;
}
.captchaImg {
  float: left;
  margin-left: 8px;
  border-radius: 4px;
}
</style>